<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h3 {
            float: left;
        }
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>


</head>
<body>
<div id="app">
    <el-form :inline="true" :model="Goods" class="demo-form-inline" >

        <el-form-item label="" >
            <el-select v-model="Goods" placeholder="选择员工" style="width:150px" >
                <el-option label="李四" value="1"></el-option>
                <el-option label="王五" value="2"></el-option>
                <el-option label="张三" value="3"></el-option>
                <el-option label="未上架" value="4"></el-option>
                <el-option label="已上架" value="5"></el-option>
                <el-option label="未上架" value="6"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

<h1  align="center">员工月度订单汇总</h1>

<!--    <table width="100%">-->
<!--        <tr>-->
<!--            <th align="left"> 员工:</th>-->
<!--            <th > 联系电话:</th>-->
<!--            <th > 统计月份:</th>-->
<!--        </tr>-->
<!--        <tr v-for="(user,i) in user" align="center">-->
<!--            <td>{{user.nAME}}</td>-->
<!--            <td>{{user.tel}}</td>-->
<!--            <td>{{user.c}}</td>-->
<!--        </tr>-->

<!--    </table>-->


<hr>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="createtime"
                    label="创建时间"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="goodsName"
                    label="菜名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="unit"
                    label="单位"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="count"
                    align="center"
                    label="分量">
            </el-table-column>

            <el-table-column
                    prop="price"
                    align="center"
                    label="单价">
            </el-table-column>
            <el-table-column
                    prop="subTotal"
                    align="center"
                    label="总价">
            </el-table-column>

        </el-table>
    </template>
    <hr>
    <h3  style="width: 40%"> 操作员:</h3>  <h3 style="width: 60%"> 操作时间:</h3>
</div>

<script src="./js/vue.js"></script>
<script src="./element-ui/lib/index.js"></script>
<link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
<script src="./js/axios-0.18.0.js"></script>


<script>

    new Vue({
        el: "#app",
        mounted(){
            // 页面加载完成后，发送异步请求，查询数据
         this.selectAll()

        },
        methods: {
          selectAll(){
              var _this = this;
              axios({
                  method:"post",
                  url:"http://localhost:8080/login/selectServlet",
                  data: this.orderItem
              }).then(function (resp) {
                  _this.tableData = resp.data;
              })
          },
            handleSelectionChange(val) {
                this.multipleSelection = val;

                // console.log(this.multipleSelection)
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 0) {
                    return 'success-row';
                } else if (rowIndex === 2) {
                    return 'warning-row';
                }
                return '';
            }
        },

        data(){
            return{
                user:[],
                tableData: [{
                    createtime: '华为',
                    goodsName: '12',
                    unit: '启用',
                    count: '华为',
                    price: '元',
                    subTotal: '1'

                }, {
                    createtime: '华为',
                    goodsName: '12',
                    unit: '启用',
                    count: '华为',
                    price: '元',
                    subTotal: '1'
                },
                {

                  createtime: '华为',
                  goodsName: '12',
                  unit: '启用',
                  count: '华为',
                  price: '元',
                  subTotal: '1'
                }],
                orderItem: {
                    createtime: '',
                    goodsName: '',
                    unit: '',
                    count: '',
                    price: '',
                    subTotal: ''
            },

            }
        }

    });



    </script>


</body>
</html>